// 用户个人资料-扩展信息

var expansion = Vue.component('expansion', {
    data () {
        return {
            editStatus: false,   // education,work-experience,family-member,self-evaluation,talent-demand,specialty
            userInfo: {
                eduBgs: {},         // 教育背景
                workHistorys: {},   // 工作经历
                familys: {},        // 家庭成员
                comments: {},       // 一些评价
            }
        }
    },
    created() {
        // 获取用户扩展信息
        this.getUserInfo();
    },
    methods: {
        getUserInfo() {
            // 获取用户扩展信息
            var self = this;
            $.ajax({
                type:"POST",
                url: _UrlPrefix + "/api/member/staff/show2",
                xhrFields: {
                withCredentials: true
                },
                data: {
                    app_access: _AppAccess,
                    token: localStorage.getItem('token')
                },
                success:function(res){
                    if(0 == res.code) {
                        console.log("res: ", res)
                        self.userInfo = res.data;
                    }
                }
            })
        },
        onEdit() {
            // 编辑
            this.editStatus = true;
        },
        onBack() {
            // 返回
            this.editStatus = false;
        },
        onSave() {
            // 保存
            console.log("保存")
        }
    },
    template: ` <div class="data-expansion">                    
                    <template v-if="editStatus">
                        <!-- 教育背景编辑 -->
                        <div class="content">
                            <div class="contents">
                                <div class="second-title">教育背景</div>
                                <div class="two-row rows">
                                    <div class="left-row-child">
                                        <div class="name">起止时间：</div>
                                        <div class="detail">
                                            <el-date-picker
                                                v-model="userInfo.eduBgs.eduBgStart[1]"
                                                type="date"
                                                placeholder="选择日期">
                                            </el-date-picker>
                                            至
                                            <el-date-picker
                                                v-model="userInfo.eduBgs.eduBgEnd[1]"
                                                type="date"
                                                placeholder="选择日期">
                                            </el-date-picker>
                                        </div>
                                    </div>
                                    <div class="right-row-child">
                                        <div class="name">毕业院校：</div>
                                        <div class="detail">
                                            <input type="text" v-model="userInfo.eduBgs.eduBgSchool[1]">
                                        </div>
                                    </div>
                                </div>
                                <div class="one-row rows">
                                    <div class="name">专业：</div>
                                    <div class="detail">
                                        <input type="text" v-model="userInfo.eduBgs.eduBgMajor[1]">
                                    </div>
                                </div>
                                <div class="one-row rows">
                                    <div class="name">所获奖项：</div>
                                    <div class="detail">
                                        <textarea class="textarea" v-model="userInfo.eduBgs.eduBgAward[1]" cols="30" rows="5" maxlength="400"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 工作经历编辑 -->
                        <div class="content">
                            <div class="contents">
                                <div class="second-title">工作经历</div>
                                <div class="two-row rows">
                                    <div class="left-row-child">
                                        <div class="name">起止时间：</div>
                                        <div class="detail">
                                            <el-date-picker
                                                v-model="userInfo.workHistorys.workStart[1]"
                                                type="date"
                                                placeholder="选择日期">
                                            </el-date-picker> 
                                                至 
                                                <el-date-picker
                                                v-model="userInfo.workHistorys.workEnd[1]"
                                                type="date"
                                                placeholder="选择日期">
                                            </el-date-picker>
                                        </div>
                                    </div>
                                    <div class="right-row-child">
                                        <div class="name">公司名称：</div>
                                        <div class="detail">
                                            <input type="text" v-model="userInfo.workHistorys.workComName[1]">
                                        </div>
                                    </div>
                                </div>
                                <div class="one-row rows">
                                    <div class="name">职位：</div>
                                    <div class="detail">
                                        <input type="text" v-model="userInfo.workHistorys.workJob[1]">
                                    </div>
                                </div>
                                <div class="one-row rows">
                                    <div class="name">离职原因：</div>
                                    <div class="detail">
                                        <textarea class="textarea" v-model="userInfo.workHistorys.workLeave[1]" cols="30" rows="5" maxlength="400"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 家庭成员编辑 -->
                        <div class="content">
                            <div class="contents">
                                <div class="second-title">家庭成员</div>
                                <div class="two-row rows">
                                    <div class="left-row-child">
                                        <div class="name">姓名：</div>
                                        <div class="detail">
                                        <input type="text" v-model="userInfo.familys">
                                        </div>
                                    </div>
                                    <div class="right-row-child">
                                        <div class="name">称谓：</div>
                                        <div class="detail">
                                            <input type="text" v-model="userInfo.familys">
                                        </div>
                                    </div>
                                </div>
                                <div class="two-row rows">
                                    <div class="left-row-child">
                                        <div class="name">工作单位：</div>
                                        <div class="detail">
                                        <input type="text" v-model="userInfo.familys">
                                        </div>
                                    </div>
                                    <div class="right-row-child">
                                        <div class="name">联系电话：</div>
                                        <div class="detail">
                                            <input type="text" v-model="userInfo.familys">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 自我评价编辑 -->
                        <div class="content">
                            <div class="contents">
                                <div class="second-title">自我评价</div>
                                <div class="one-row rows">
                                    <div class="detail">
                                    <textarea class="textarea" v-model="userInfo.comments.comFeature" cols="30" rows="5" maxlength="400"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="contents">
                                <div class="second-title">自我爱好特长评价</div>
                                <div class="one-row rows">
                                    <div class="detail">
                                        <textarea class="textarea" v-model="userInfo.comments.comHobby" cols="30" rows="5" maxlength="400"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="contents">
                                <div class="second-title">员工对工厂对评价</div>
                                <div class="one-row rows">
                                    <div class="detail">
                                        <textarea class="textarea" v-model="userInfo.comments.comExpect" cols="30" rows="5" maxlength="400"></textarea>
                                    </div>
                                </div>

                                <div class="btns">
                                    <button class="btn btn-save" @click="onBack">返回</button>
                                    <button class="btn btn-primary" @click="onSave">保存设置</button>
                                </div>
                            </div>
                        </div>
                    </template>


                    <template v-else>
                        <!-- 非编辑状态 -->
                        <div class="content">
                            <div class="contents">
                                <div class="second-title">教育背景</div>
                                <div class="two-row rows">
                                    <div class="left-row-child">
                                        <div class="name">起止时间：</div>
                                        <div class="detail">{{userInfo.eduBgs.eduBgStart[1]}}-{{userInfo.eduBgs.eduBgEnd[1]}}</div>
                                    </div>
                                    <div class="right-row-child">
                                        <div class="name">毕业院校：</div>
                                        <div class="detail">{{userInfo.eduBgs.eduBgSchool[1]}}</div>
                                    </div>
                                </div>
                                <div class="one-row rows">
                                    <div class="name">专业：</div>
                                    <div class="detail">{{userInfo.eduBgs.eduBgMajor[1]}}</div>
                                </div>
                                <div class="one-row rows">
                                    <div class="name">所获奖项：</div>
                                    <div class="detail">{{userInfo.eduBgs.eduBgAward[1]}}</div>
                                </div>
                            </div>

                            <div class="contents">
                                <div class="second-title">工作经历</div>
                                <div class="two-row rows">
                                    <div class="left-row-child">
                                        <div class="name">起止时间：</div>
                                        <div class="detail">{{userInfo.workHistorys.workStart[1]}}-{{userInfo.workHistorys.workEnd[1]}}</div>
                                    </div>
                                    <div class="right-row-child">
                                        <div class="name">公司名称：</div>
                                        <div class="detail">{{userInfo.workHistorys.workComName[1]}}</div>
                                    </div>
                                </div>
                                <div class="one-row rows">
                                    <div class="name">职位：</div>
                                    <div class="detail">{{userInfo.workHistorys.workJob[1]}}</div>
                                </div>
                                <div class="one-row rows">
                                    <div class="name">离职原因：</div>
                                    <div class="detail">{{userInfo.workHistorys.workLeave[1]}}</div>
                                </div>
                            </div>

                            <div class="contents">
                                <div class="second-title">家庭成员</div>
                                <div class="two-row rows">
                                    <div class="left-row-child">
                                        <div class="name">姓名：</div>
                                        <div class="detail">{{userInfo.familys}}</div>
                                    </div>
                                    <div class="right-row-child">
                                        <div class="name">称谓：</div>
                                        <div class="detail">{{userInfo.familys}}</div>
                                    </div>
                                </div>
                                <div class="one-row rows">
                                    <div class="name">工作单位：</div>
                                    <div class="detail">{{userInfo.familys}}</div>
                                </div>
                                <div class="one-row rows">
                                    <div class="name">联系电话：</div>
                                    <div class="detail">{{userInfo.familys}}</div>
                                </div>
                            </div>

                            <div class="contents">
                                <div class="second-title">自我能力评价</div>
                                <div class="one-row rows">
                                    <div class="detail">{{userInfo.comments.comFeature}}</div>
                                </div>
                            </div>

                            <div class="contents">
                                <div class="second-title">自我爱好特长评价</div>
                                <div class="one-row rows">
                                    <div class="detail">{{userInfo.comments.comHobby}}</div>
                                </div>
                            </div>

                            <div class="contents">
                                <div class="second-title">员工对工厂对评价</div>
                                <div class="one-row rows">
                                    <div class="detail">{{userInfo.comments.comExpect}}</div>
                                </div>

                                <div class="btns">
                                    <div class="operat edit" @click="onEdit('jobs')">编辑<img src="../../imgs/manage/edit.png"></div>
                                </div>
                            </div>
                        </div>
                    </template>

                </div>`
})